<template>
  <div>
    <div class="page-title">{{ getLang('pageTitle') }}</div>
    <div class="app-container">

      <el-row :gutter="16">
        <el-col :span="4">
          <div class="filter-container">
            <SimpleTree
              :data="formObj.orgTreeData.data"
              :node-key="formObj.orgTreeData.nodeKey"
              :selected-node="formObj.orgTreeData.selectedNode"
              :tree-node-click-fnc="handleTreeNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <div class="filter-container">
            <comm-form
              ref="searchForm"
              :form-visible="true"
              :form-definition="userSearchFormLayout"
              :form-data="formObj.searchForm.user"
            />
          </div>
          <FlexTable
            ref="userList"
            :table-key="listObj.user.isUpdate"
            :ref-main-page="refSelfObj"
            :title="getLang('userList')"
            :show-selection="true"
            :has-action-columns="true"
            :table-visible="true"
            edit-mode="none"
            height="550"
            :is-loading="listObj.user.listLineLoading"
            :table-definition="userListLayout"
            :table-data="listObj.user.listLine"
          />
          <pagination
            v-show="listObj.user.lineNum>0"
            :total="listObj.user.lineNum"
            :page.sync="listObj.user.pagingDefine.page"
            :limit.sync="listObj.user.pagingDefine.limit"
            @pagination="searchUserList"
          />

        </el-col>
      </el-row>

      <form-dialog
        v-if="formObj.addForm.showFlg.user"
        ref="userEditDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.user"
        :title="isAddUser?getLang('addUserTitle'):getLang('updateUserTitle')"
        column-count="2"
        :form-data="formObj.addForm.user"
        :form-definition="userAddFormLayout"
        @close="formObj.addForm.showFlg.user = false"
      />

      <form-dialog
        v-if="formObj.addForm.showFlg.changePwd"
        ref="changePwdDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.changePwd"
        :title="getLang('changePwd')"
        column-count="2"
        label-width="100px"
        :form-data="formObj.addForm.changePwd"
        :form-definition="userChangePwdFormLayout"
        @close="formObj.addForm.showFlg.changePwd = false"
      >
        <span slot="oldPassword" class="show-pwd" @click="showPwd('oldPwd')">
          <svg-icon :icon-class="formObj.addForm.passwordType.oldPwd === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
        </span>
        <span slot="newPassword" class="show-pwd" @click="showPwd('pwd1')">
          <svg-icon :icon-class="formObj.addForm.passwordType.pwd1 === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
        </span>
        <span slot="newPassword2" class="show-pwd" @click="showPwd('pwd2')">
          <svg-icon :icon-class="formObj.addForm.passwordType.pwd2 === 'no-autofill-pwd' ? 'eye' : 'eye-open'" />
        </span>
      </form-dialog>

      <el-tooltip placement="top" content="tooltip">
        <back-to-top :custom-style="baseBckToTopStyle" :visibility-height="300" :back-position="1" transition-name="fade" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import BackToTop from '@/components/BackToTop'

import FormDialog from '../../common/components/form-dialog/FormDialog'
import FlexTable from '../../common/components/flex-table/FlexTable'
import CommForm from '../../common/components/com-form/CommForm'
import SimpleTree from '../../common/components/simple-tree/SimpleTree.vue'

import logic from './user.logic'

export default {
  name: 'UserPage',
  components: { Pagination, BackToTop, FormDialog, FlexTable, CommForm, SimpleTree },
  mixins: [logic]
}
</script>

<style lang="scss" scoped>
.show-pwd {
    position: absolute;
    right: 10px;
    // top: 7px;
    font-size: 16px;
    // color: $dark_gray;
    cursor: pointer;
    user-select: none;
    text-align: center;
  }
</style>
